<template>
	
  <view class="container">

	  <image src="../../../static/dongtai.png" style="width: 100%; height: 200rpx;"></image>
    <!-- 视频列表 -->
    <scroll-view class="video-list" scroll-y>
	  <view class="video-container">
		  <view class="video-item" v-for="(item, index) in videos" :key="index" @click="goVideo(item.id)">
			  
			<view class="author-info-container">
				<view class="pic">
					<!-- <image src="/static/cy-my/pic-m1.png" style="height: 4%;" mode="widthFix">
					</image> -->
					<u-avatar :src="item.user.avatarUrl"></u-avatar>
					<!-- <image class="banner" :src="item.image"></image> -->
				</view>
				<view class="txt" >
					<view class="name" >
						<view class="h3">
							{{item.user.nickname}} 
						</view>
						<view class="phone">
							{{item.timebefore}}
						</view>
					</view>
				</view>
			</view>
			<view class="video-container">
			<image class="cover" :src="item.coverUrl" ></image>
			<view class="text-container" >
				<text class="title">{{item.title}}</text>
				<text class="info">{{item.introduction}}</text>
			</view>
			</view>
		  </view>
	  </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		current: 1,
				pageSize: 10,
				
				total: 0,
				prev: "-1",
				next: "-1",
		// 视频数据
		videos: [
		  {
					id: "string",
					coverUrl: "/static/video-cover/1.jpg",
					videoUrl: "string",
					title: "这是一个视频标题",
					introduction: "视频副标题：描述",
					type: "string",
					user: {
						id: "string",
						nickname: "string",
						avatarUrl: "string"
					},
					visitCount: 0,
					likeCount: 0,
					liked: true,
					status: "string",
					createTime: "1h前发布"
		  },
		  {
		  	id: "string",
		  	coverUrl: "/static/video-cover/1.jpg",
		  	videoUrl: "string",
		  	title: "这是一个视频标题",
		  	introduction: "视频副标题：描述",
		  	type: "string",
		  	user: {
		  		id: "string",
		  		nickname: "string",
		  		avatarUrl: "string"
		  	},
		  	visitCount: 0,
		  	likeCount: 0,
		  	liked: true,
		  	status: "string",
		  	createTime: "1h前发布"
		  },
		  {
		  	id: "string",
		  	coverUrl: "/static/video-cover/1.jpg",
		  	videoUrl: "string",
		  	title: "这是一个视频标题",
		  	introduction: "视频副标题：描述",
		  	type: "string",
		  	user: {
		  		id: "string",
		  		nickname: "string",
		  		avatarUrl: "string"
		  	},
		  	visitCount: 0,
		  	likeCount: 0,
		  	liked: true,
		  	status: "string",
		  	createTime: "1h前发布"
		  },
		],
		// 当前选中的分类索引
		active: 0,
		// 搜索关键词
		keyword: ""
    };
  },
  methods: {
    // 跳转到视频页面
	
	requestVideoInfo(){
		return new Promise((resolve, reject) => {
			uni.request({
			  method: 'GET',
			  url: "http://47.97.114.13:8080/api/video/list",
			  header: {
				"Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiTk9STUFMIiwiaWQiOiIxIiwiZXhwIjoxNjkwMjk3ODA3fQ.XQHF1MMI03eK_0HYSmarG_3_SB2KK_W1RhT92hP1zXo",
				// this.$store.state.token,
			  },
			  data: {
				current: this.current,
				pageSize: this.pageSize,
			  },
			  success: (res) => {
				console.log("获取视频列表");
				console.log(res);
				this.videos = res.data.data.list;
				console.log(this.videos);
				resolve();
			  },
			  fail: (err) => {
				reject(err);
			  }
			});
		});
	},
	  
	async onLoad() {
		console.log("进入2页面");
		await this.requestVideoInfo(); // 使用async/await语法处理异步操作
	  // 阻塞操作完成后继续渲染页面
	},
	onPullDownRefresh(){
			  console.log("刷新2页面")
			uni.request({
			  method: 'GET',
			  url: "http://47.97.114.13:8080/api/video/list",
			  header: {
				"Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiTk9STUFMIiwiaWQiOiIxIiwiZXhwIjoxNjkwMjk3ODA3fQ.XQHF1MMI03eK_0HYSmarG_3_SB2KK_W1RhT92hP1zXo",
				// this.$store.state.token,
			  },
			  data: {
				current: this.current,
				pageSize: this.pageSize,
			  },
			  success: (res) => {
				console.log("获取视频列表");
				console.log(res);
				this.videos = res.data.data.list;
				console.log(this.videos);
			  },

			});
	  					  uni.stopPullDownRefresh()
		      },
	// 跳转到视频页面
	goVideo(id) {
	  uni.navigateTo({
	  	url: "/pages/video-detail/video-detail"+"?id="+id
	  });
	},
	goToPage(url) {
		
		// if (!url) return;
		uni.navigateTo({
			url: url
		});
	}
	
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: gainsboro;
}
.item {
   font-size :28rpx; 
   margin :10rpx; 
   color :#999999
}
.active {
   color :#ff0000
}
.video-list {
   width :100%;
   margin: 0 auto;
}
.video-container{
	display: flex;
	flex-wrap: wrap;
}


.author-info-container{
	padding-top: 3%;
	padding-bottom: 1%;
	padding-left: 1%;
	display: flex;
	justify-content: flex-start;
}
.pic {
	width : 10%;
	float: left;
}

.txt {
	/* clear: both;
	padding: 20rpx 0;
	width: 80%;
	overflow: hidden; */
	margin-left: 10px;
}

.txt .name {
	position: relative;
	display: flex;
}

.txt .name .h3 {
	margin-top: 15rpx;
	font-size: 38rpx;
	margin-bottom: 6rpx;
	font-weight: bold;
}

.txt .name .phone {
	height: 40rpx;
	line-height: 40rpx;
	font-size: 30rpx;
	width: 330rpx;
	background-size: 100rpx;
	color: rgb(68, 68, 68);
	margin-top: 25rpx;
}



.video-item {
   width: 100%;
   margin-bottom: 5px;
   background-color: white;
   height:325rpx;
   
}
.cover {
   width :40%; 
   height :200rpx;
   margin-left: 10rpx;
   margin-bottom: 10rpx;
   border-radius: 20rpx;
}
.text-container {
    display: flex;
    flex-direction: column;
    padding-left: 10rpx;
    padding-right: 10rpx;
    padding-bottom: 10rpx;
	width: 55%;
}
.title {
   font-size :38rpx; 
   padding-left :10rpx; 
   padding-right :10rpx;
   font-weight: bold;
}
.info {
   font-size :32rpx; 
   color :#999999; 
   padding-left :10rpx; 
   padding-right :10rpx; 
   padding-bottom :10rpx
}



</style>